<template>

  <el-form :model="formData"
           ref="ruleForm"
           :rules="rules"
           label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="本局排名："
                      prop="rank">
          <el-input v-model="formData.rank"
                    clearable
                    type="number"
                    placeholder="请输入本局排名"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="高新区满意率："
                      prop="myl">
          <el-input v-model="formData.myl"
                    clearable
                    type="number"
                    placeholder="请输入高新区满意率">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="高新区回复周期："
                      prop="hfzq">
          <el-input v-model="formData.hfzq"
                    clearable
                    type="number"
                    placeholder="请输入高新区回复周期">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="高新区退件率："
                      prop="tjl">
          <el-input v-model="formData.tjl"
                    clearable
                    type="number"
                    placeholder="请输入高新区退件率">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-col>

    </el-row>
    <el-form-item label-width="0"
                  v-if="formData.rank">
      <el-table :data="detailList"
                stripe
                border
                size="mini"
                height="700">
        <el-table-column prop="sort"
                         label="排名"
                         show-overflow-tooltip
                         align="center"></el-table-column>
        <el-table-column prop="name"
                         label="局名称"
                         show-overflow-tooltip
                         align="right">
          <template slot-scope="{row,$index}">
            <el-input class="my-input-format"
                      v-if="row"
                      v-model="row.name"
                      size="small">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sum"
                         label="总件数"
                         show-overflow-tooltip
                         align="right">
          <template slot-scope="{row,$index}">
            <el-input class="my-input-format"
                      v-if="row"
                      type="number"
                      v-model="row.sum"
                      size="small">
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>

    <el-row type="flex"
            justify="end"
            class="bottom">
      <el-button type="primary"
                 :loading="btnLoading"
                 @click="submitForm('ruleForm')">确认</el-button>
    </el-row>
  </el-form>
</template>

<script>
  // import myInputFormat from '@/components/input/input-format.vue';
  // import keyDownFn from '@/utils/inputDown.js'
  export default {
    // components: { myInputFormat },
    data () {
      return {
        data: {},
        btnLoading: false,
        isLoading: false,
        formData: {
          myl: '',
          tjl: '',
          hfzq: '',
          rank: null,
        },
        typeList: [],
        rules: {
          myl: { required: true, message: '请输入高新区满意率', trigger: 'blur' },
          tjl: { required: true, message: '请输入高新区回复周期', trigger: 'blur' },
          hfzq: { required: true, message: '请输入高新区退件率', trigger: 'blur' },
          rank: { required: true, message: '请输入本局排名', trigger: 'blur' }
        },
        sum: 8
      }
    },
    mounted () {
      this.keyDownFn()
    },
    methods: {
      // 提交按钮
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var isShow = true
            this.detailList.forEach(item => {
              if (!item.sum || !item.name) {
                isShow = false
              }
            })
            if (isShow) {
              this.btnLoading = true
              this.formData.list = this.detailList
              this.$axios.post('/dataHandle/addData', this.formData).then(res => {
                this.btnLoading = false
                if (res) {
                  this.$message.success('操作成功！')
                  this.$emit('hideFn')
                }
              })
            } else {
              this.$message.error('请输入完整信息！')
            }
          } else {
            return false;
          }
        });
      },
      keyDownFn (moveIndex) {
        document.onkeydown = _.debounce((e) => {
          let timer = null
          let downIndex = 0 // 设置当前哪个获取焦点
          let { keyCode } = e // 获取上下左右键码
          let downNum = 0 // 上下键，根据余数判断
          let keyDownList = [38, 40, 37, 39]
          if (!keyDownList.includes(keyCode)) return // 如果不是上下左右键
          let inputs = document.querySelectorAll('.el-table__body-wrapper input:not(:disabled)')
          if (!inputs || inputs.length <= 0) return
          let _num = inputs.length % 2
          if (_num === 0) downNum = 2
          if (_num === 1) downNum = 3
          moveIndex && (downNum = moveIndex)
          inputs.forEach((item, index) => {
            if (item == document.activeElement) {
              downIndex = index
              switch (keyCode) {
                // 上
                case 38:
                  downIndex -= downNum
                  break;
                // 下
                case 40:
                  downIndex += downNum
                  break;
                // 左
                case 37:
                  downIndex -= 1
                  break;
                // 右
                case 39:
                  downIndex += 1
                  break;
                default:
                  break;
              }

            }
          })
          if (downIndex < 0) downIndex = 0

          if (downIndex === inputs.length) downIndex = inputs.length - 1

          inputs[downIndex].focus();
          if (!!timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            inputs[downIndex].select()
          }, 200);
          keyCode = null
        }, 50)
      }
    },
    computed: {
      detailList () {
        let _arr = []
        for (let index = 0; index < this.formData.rank; index++) {
          if (index === this.formData.rank - 1) {
            _arr.push({
              sort: index + 1,
              name: '教育文化和卫生健康局',
              sum: '',
            })
          } else {
            _arr.push({
              sort: index + 1,
              name: '',
              sum: '',
            })
          }

        }
        return _arr
      }
    }
  }
</script>

<style lang='scss' scoped>
  .el-form-item {
    margin-top: 20px !important;
  }
  .bottom {
    margin-top: 20px;
  }
</style>
